<template>
	<view class="new-products-carousel">
		<scroll-view
			class="carousel-container"
			scroll-x
			:show-scrollbar="false"
			:enable-flex="true"
		>
			<view class="products-list">
				<view
					class="product-item"
					v-for="product in products"
					:key="product.id"
					@tap="onProductTap(product)"
				>
					<image
						:src="product.image || '/static/empty/no.jpg'"
						class="product-image"
						mode="aspectFill"
					/>
					<view class="product-info">
						<text class="product-name">{{ product.name }}</text>
						<view class="price-area">
							<text class="current-price">¥{{ product.price }}</text>
							<text class="new-badge">NEW</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { useCool } from "/@/cool";

defineProps<{
	products: any[];
}>();

const { router } = useCool();

function onProductTap(product: any) {
	router.push(`/pages/goods/detail?id=${product.id}`);
}
</script>

<style lang="scss" scoped>
.new-products-carousel {
	padding: 0 16rpx;
}

.carousel-container {
	width: 100%;
	white-space: nowrap;
}

.products-list {
	display: flex;
	gap: 16rpx;
	padding: 8rpx 0;
}

.product-item {
	flex-shrink: 0;
	width: 240rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
	}
}

.product-image {
	width: 100%;
	height: 180rpx;
	background-color: #f5f5f5;
}

.product-info {
	padding: 16rpx;
}

.product-name {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.price-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.current-price {
	font-size: 28rpx;
	font-weight: 600;
	color: #ff4757;
}

.new-badge {
	font-size: 20rpx;
	color: #ffffff;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}
</style>
